<!DOCTYPE html>
<html>
<head>
    <title>Image Test Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-container {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .image-test {
            margin: 10px 0;
        }
        img {
            max-width: 300px;
            border: 1px solid #eee;
        }
        .image-path {
            font-family: monospace;
            background-color: #f5f5f5;
            padding: 5px;
            margin: 5px 0;
            border-radius: 3px;
        }
        h2 {
            margin-top: 30px;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
        }
    </style>
</head>
<body>
    <h1>Image URL Test Page</h1>
    <p>This page tests various ways of accessing uploaded images</p>

    <div id="image-tests">
        <h2>Loading...</h2>
        <p>Fetching image list from server...</p>
    </div>

    <script>
        // 获取已上传的图片列表
        fetch('/api/file/list')
            .then(response => response.json())
            .then(data => {
                if (data.code === 200 && data.data && data.data.length > 0) {
                    const container = document.getElementById('image-tests');
                    container.innerHTML = '<h2>Image Tests</h2>';

                    data.data.forEach(file => {
                        // 为每个图片测试不同的URL格式
                        const imageTest = document.createElement('div');
                        imageTest.className = 'test-container';
                        
                        // 添加图片名称
                        const nameElement = document.createElement('h3');
                        nameElement.textContent = file.name;
                        imageTest.appendChild(nameElement);

                        // 测试直接URL
                        addImageTest(imageTest, '/uploads/' + file.name, 
                            'Direct URL: /uploads/' + file.name);
                            
                        // 测试带API上下文的URL
                        addImageTest(imageTest, '/api/uploads/' + file.name, 
                            'With context path: /api/uploads/' + file.name);
                        
                        container.appendChild(imageTest);
                    });
                } else {
                    document.getElementById('image-tests').innerHTML = 
                        '<h2>No Images Found</h2><p>Please upload some images first.</p>';
                }
            })
            .catch(error => {
                document.getElementById('image-tests').innerHTML = 
                    `<h2>Error</h2><p>Failed to load images: ${error.message}</p>`;
            });

        // 帮助函数：添加图片测试
        function addImageTest(container, src, description) {
            const testDiv = document.createElement('div');
            testDiv.className = 'image-test';
            
            const descElement = document.createElement('div');
            descElement.className = 'image-path';
            descElement.textContent = description;
            testDiv.appendChild(descElement);
            
            const img = document.createElement('img');
            img.src = src;
            img.onerror = () => {
                img.style.display = 'none';
                const errorElement = document.createElement('div');
                errorElement.textContent = 'Failed to load image';
                errorElement.style.color = 'red';
                testDiv.appendChild(errorElement);
            };
            testDiv.appendChild(img);
            
            container.appendChild(testDiv);
        }
    </script>
</body>
</html> 